<template>
  <view class="container">
    <!-- 顶部搜索框 -->
    <view class="search-box">
      <u-search
        placeholder="请输入搜索内容"
        v-model="keyword"
        :show-action="true"
        action-text="搜索"
        @search="handleSearch"
        @custom="handleSearch"
      ></u-search>
    </view>

    <!-- 主体内容 -->
    <view class="main-content">
      <!-- 左侧分类 -->
      <scroll-view class="left-category" scroll-y>
        <view
          v-for="(item, index) in categories"
          :key="item.id"
          class="category-item"
          :class="{ active: currentCategory === index }"
          @click="switchCategory(index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>

      <!-- 右侧数据 -->
      <scroll-view class="right-content" scroll-y>
        <!-- 顶部标题栏 -->
        <view class="category-header">
          <text class="category-title">{{
            categories[currentCategory].name
          }}</text>
        </view>

        <!-- 商品列表 -->
        <view class="data-list">
          <view
            v-for="item in currentData"
            :key="item.id"
            class="data-item"
            @click="viewDetail(item)"
          >
            <image
              :src="item.image"
              mode="aspectFill"
              class="item-image"
            ></image>
            <view class="item-info">
              <text class="item-title">{{ item.title }}</text>
              <view class="item-bottom">
                <text class="item-price">¥{{ item.price }}</text>
                <view class="item-cart" @click.stop="addToCart(item)">
                  <image
                    src="/static/icon/shoppingCard.svg"
                    class="cart-icon"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 购物车 -->
    <view class="shopping-fixed" @click="viewCart">
      <!-- 数量 -->
      <view class="num">{{ cartNum }}</view>
      <view class="shopping-fixed-view">
        <image src="/static/icon/shoppingCard.svg" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      currentCategory: 0,
      cartNum: 7,
      categories: [
        { id: 1, name: "推荐" },
        { id: 2, name: "手机" },
        { id: 3, name: "电脑" },
        { id: 4, name: "家电" },
        { id: 5, name: "食品" },
        { id: 6, name: "服饰" },
        { id: 7, name: "美妆" },
        { id: 8, name: "运动" },
      ],
      allData: [
        // 推荐数据
        [
          {
            id: 1,
            title: "新款智能手机",
            price: 2999,
            image: "https://via.placeholder.com/150",
          },
          {
            id: 1,
            title: "新款智能手机",
            price: 2999,
            image: "https://via.placeholder.com/150",
          },
          {
            id: 1,
            title: "新款智能手机",
            price: 2999,
            image: "https://via.placeholder.com/150",
          },
          {
            id: 1,
            title: "新款智能手机",
            price: 2999,
            image: "https://via.placeholder.com/150",
          },
          {
            id: 1,
            title: "新款智能手机",
            price: 2999,
            image: "https://via.placeholder.com/150",
          },
          {
            id: 2,
            title: "轻薄笔记本电脑",
            price: 4999,
            image: "https://via.placeholder.com/150",
          },
          {
            id: 3,
            title: "智能手表",
            price: 899,
            image: "https://via.placeholder.com/150",
          },
        ],
        // 手机数据
        [
          {
            id: 4,
            title: "旗舰手机",
            price: 5999,
            image: "https://via.placeholder.com/150",
          },
          {
            id: 5,
            title: "性价比手机",
            price: 1999,
            image: "https://via.placeholder.com/150",
          },
        ],
        // 电脑数据
        [
          {
            id: 6,
            title: "游戏本",
            price: 7999,
            image: "https://via.placeholder.com/150",
          },
          {
            id: 7,
            title: "商务本",
            price: 5999,
            image: "https://via.placeholder.com/150",
          },
        ],
        // 家电数据
        [
          {
            id: 8,
            title: "智能电视",
            price: 3999,
            image: "https://via.placeholder.com/150",
          },
          {
            id: 9,
            title: "空调",
            price: 2999,
            image: "https://via.placeholder.com/150",
          },
        ],
        // 食品数据
        [
          {
            id: 10,
            title: "进口零食礼盒",
            price: 199,
            image: "https://via.placeholder.com/150",
          },
        ],
        // 服饰数据
        [
          {
            id: 11,
            title: "男士休闲衬衫",
            price: 159,
            image: "https://via.placeholder.com/150",
          },
        ],
        // 美妆数据
        [
          {
            id: 12,
            title: "护肤套装",
            price: 399,
            image: "https://via.placeholder.com/150",
          },
        ],
        // 运动数据
        [
          {
            id: 13,
            title: "跑步鞋",
            price: 499,
            image: "https://via.placeholder.com/150",
          },
        ],
      ],
    };
  },
  computed: {
    currentData() {
      return this.allData[this.currentCategory] || [];
    },
  },
  methods: {
    handleSearch() {
      uni.showToast({
        title: `搜索: ${this.keyword}`,
        icon: "none",
      });
    },
    switchCategory(index) {
      this.currentCategory = index;
    },
    addToCart(item) {
      uni.showToast({
        title: `已添加 ${item.title} 到购物车`,
        icon: "none",
      });
      this.cartNum++;
    },
    viewDetail(item) {
      uni.showToast({
        title: `查看 ${item.title} 详情`,
        icon: "none",
      });
    },
    viewCart() {
      this.$to("/pages/shoppingCard/index");
      // uni.showToast({
      //   title: `查看购物车 (${this.cartNum}件)`,
      //   icon: "none",
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.search-box {
  padding: 15px;
  background-color: #fff;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.left-category {
  width: 25%;
  background-color: #f8f8f8;
  background-color: #e4f1dc;
  .category-item {
    padding: 20rpx 10rpx;
    text-align: center;
    font-size: 14px;
    color: #4a713f;
    background-color: #e4f1dc;
    border-left: 3px solid transparent;

    &.active {
      font-weight: 700;
      color: #476f3c;
      background-color: #fbfdfb;
      border-left: 3px solid #3da450;
    }
  }
}

.right-content {
  flex: 1;
  padding: 10px;
  background-color: #f0f7e9;

  .category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

    .category-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .data-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .data-item {
    display: flex;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

    .item-image {
      width: 120px;
      height: 120px;
      flex-shrink: 0;
    }

    .item-info {
      flex: 1;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .item-title {
        font-size: 14px;
        color: #333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;

        .item-price {
          font-size: 16px;
          color: #f44;
          font-weight: bold;
        }

        .item-cart {
          width: 50rpx;
          height: 50rpx;
          background-color: #4db366;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;

          .cart-icon {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
    }
  }
}

.shopping-fixed {
  width: 100rpx;
  height: 100rpx;
  background-color: #4db366;
  border-radius: 50%;
  position: fixed;
  right: 50rpx;
  bottom: 50rpx;
  z-index: 999;

  .num {
    font-size: 30rpx;
    position: absolute;
    background-color: red;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 40rpx;
    top: -14rpx;
    right: -5rpx;
    color: white;
  }

  .shopping-fixed-view {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
}
</style>
